<!--首页-->
<template>
  <div class="home">
    <nav-login></nav-login>
    <div style="width:1200px;margin:auto">
      <home-seach></home-seach>
      <goods-nav :navindex="navindex"></goods-nav>
      <home-banner></home-banner>
      <home-notice></home-notice>
      <home-brand :brands="brands" :icon="icon1"></home-brand>
      <special-offer2 :data="special_offer" :title="title1" :icon="icon1"></special-offer2>
      <special-offer3 :data="product_recommend" :title="title3" :icon="icon1"></special-offer3>
      <home-floor :floor="floor1" :pic="pic1" :icon="icon1"></home-floor>
      <home-floor :floor="floor2" :pic="pic2" :icon="icon2"></home-floor>
      <!-- <home-floor :floor="floor3" :pic="pic3" :icon="icon3"></home-floor> -->
      <home-floor :floor="floor4" :pic="pic4" :icon="icon4"></home-floor>
      <!-- <home-floor :floor="floor5" :pic="pic5" :icon="icon5"></home-floor> -->
    </div>

    <!-- <header-ad></header-ad> -->
    <!-- <home-adimg :middleAdvertisement="middleAdvertisement"></home-adimg> -->
    <!-- <bottom-goods></bottom-goods> -->
    <bottom-nav></bottom-nav>
    <home-footer></home-footer>
    <Scroll></Scroll>
    <!-- <RightNav class="RightNav" v-show="scrollTopShow"></RightNav> -->
    <!-- <el-backtop>
       <div
        style="{
          height: 100%;
          width: 100%;
          background-color: #f2f5f6;
          box-shadow: 0 0 6px rgba(0,0,0, .12);
          text-align: center;
          line-height: 40px;
          color: #1989fa;
        }"
      >
        UP
      </div>
    </el-backtop>-->
    <ol @click="backTop" class="backTop">
      <li @click="personalCenter">
        <div>
          <i class="el-icon-user"></i>
          <span>个人中心</span>
        </div>
      </li>
      <li @mouseover="showbtn" @mouseout="removeActive()">
        <i class="el-icon-phone"></i>
        <transition name="fade">
          <ul class="showbox" v-show="show">
            <li>
              <span>联系电话 :</span>
              {{ this.$store.state.contact_info.complaint_call }}
            </li>
            <li>
              <span>邮箱 :</span>
              {{ this.$store.state.contact_info.email }}
            </li>
            <li>
              <span>技术咨询 :</span>
              {{ this.$store.state.contact_info.technical_phone }}
            </li>
            <li>
              <span>投诉 :</span>
              {{ this.$store.state.contact_info.contact_number }}
            </li>
          </ul>
        </transition>
      </li>
      <li @click="purchase">
        <div>
          <i class="el-icon-edit-outline"></i>
          <span>快速下单</span>
        </div>
      </li>

      <li @click="backTop">
        <i class="el-icon-upload2"></i>
      </li>
    </ol>
  </div>
</template>
<script>
// 图片
import goods from "../../assets/images/goods1.png";

import pic1 from "@/assets/homeFloor/pic1.jpg"; // 楼层左侧图片
import pic2 from "@/assets/homeFloor/pic2.jpg"; // 楼层左侧图片
import pic3 from "@/assets/homeFloor/pic3.jpg"; // 楼层左侧图片
import pic4 from "@/assets/homeFloor/pic4.png"; // 楼层左侧图片
import pic5 from "@/assets/homeFloor/pic5.png"; // 楼层左侧图片

import icon1 from "@/assets/homeFloor/icon1.png"; // 楼层左侧图片
import icon2 from "@/assets/homeFloor/icon2.png"; // 楼层左侧图片
import icon3 from "@/assets/homeFloor/icon3.png"; // 楼层左侧图片
import icon4 from "@/assets/homeFloor/icon4.png"; // 楼层左侧图片
import icon5 from "@/assets/homeFloor/icon5.png"; // 楼层左侧图片
export default {
  name: "home",
  data() {
    return {
      title1: "爆款特惠",
      title3: "热卖推荐",

      show: false, //联系客服的显示与隐藏
      backShow: true, // 返回顶部
      middleAdvertisement: "", // 中间广告
      brands: [], //广告
      // mySwitch :false,
      product_recommend: [], // 产品推荐
      special_offer: [], // 产品推荐
      shoppingNum: null, // 购物车
      icon1, // 左侧图标
      icon2,
      icon3,
      icon4,
      icon5,

      pic1, // 左侧图片
      pic2,
      pic3,
      pic4,
      pic5,

      navindex: 0,
      contact_info: {}, // 联系客服的内容存放处
      scrollTopShow: 0,
      floor1: {}, // 楼层具体数据
      floor2: {},
      floor3: {},
      floor4: {},
      floor5: {}
    };
  },

  components: {
    homeBanner: () => import("./components/Banner"),
    homeNotice: () => import("./components/HomeNotice"),
    specialOffer3: () => import("./components/SpecialOffer3"),
    specialOffer2: () => import("./components/SpecialOffer2"),
    homeFloor: () => import("./components/Floor"),
    homeBrand: () => import("./components/Brand"),
    homeAdimg: () => import("./components/ADpic"),
    bottomGoods: () => import("./components/BottomGoods"),
    Scroll: () => import("./components/Scroll")
    // RightNav: () => import("./components/RightNav")
  },
  methods: {
    removeActive() {
      this.show = false;
    },
    showbtn() {
      this.show = true;
    },

    // 个人中心
    personalCenter() {
      this.$router.push({
        name: "MyCenter"
      });
      this.$store.commit("leftIndex", 0);
    },

    // 发布求购
    purchase() {
      this.$router.push({
        name: "QuickOrder"
      });
    },

    // 返回顶部
    backTop() {
      document.documentElement.scrollTop = 0;
    },
    // 获取资讯中心的数据
    async getInformationCenterData() {
      const { data } = await this.$http("/api/home/advisory_center/newscate");
      console.log("--------------------------------------------------");
      console.log(data);
      if (data.State.Code == 200) {
        this.$store.commit("getInformationCenterData", data.cate);
      }
    },
    scrollActive() {
      const scrollactivetop = document.documentElement.scrollTop; // 滚轮到顶部距离
      const bodyHeight = document.body.clientHeight; // 当前页面body的高度
      // console.log(bodyHeight)
      if (scrollactivetop > 1200) {
        // 兼容 页面高度过小而产生的 导航漂浮  bodyHeight > 1800
        this.backShow = true;
      } else {
        this.backShow = false;
      }
    },
    // async 请求
    async getInfo() {
      let { data } = await this.$http({
        method: "post",
        url: "/api/home/index/index",
        data: {}
      });
      if (data.State.Code == 200) {
        let DATA = data.data;
        console.log(data);
        // console.log(data.data.brand);
        this.brands = data.data.brand;

        this.$store.commit("homeDisplay", DATA);
        // 产品推荐区域没有对接接口

        this.$store.commit("contact_info", DATA.contact_info); // 联系客服
        console.log(DATA, "DAADADADADADADA");
        this.floor1 = this.intercept(DATA.floor[0]); // 楼层 1
        this.floor2 = this.intercept(DATA.floor[1]); // 楼层 2
        this.floor3 = this.intercept(DATA.floor[2]); // 楼层 3
        // 新增45楼层
        this.floor4 = this.intercept(DATA.floor[3]); // 楼层 2
        this.floor5 = this.intercept(DATA.floor[4]); // 楼层 3
        console.log(
          this.floor1,
          this.floor2,
          this.floor3,
          this.floor4,
          this.floor5,
          "huoqu"
        );
        this.middleAdvertisement = DATA.intermediate_ad;
        this.product_recommend = DATA.product_recommend;

        this.special_offer = DATA.special_offer;

        console.log(
          this.product_recommend,
          "&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&",
          this.special_offer
        );
      }
    },
  
    // open() {
    //   this.$alert(`
    //     尊敬的客户您好，
    //     春节将至，
    //     本公司2020年1月24日-2020年2月9日放假。
    //     2020年2月10日正常上班。
    //     如给您带来不便，
    //     敬请谅解，
    //     放假期间如有急事，
    //     可拨打400-900-1339，
    //     长春文德孚智能科技有限公司将竭诚为您服务。
    //     祝：各位新老顾客春节愉快，幸福安康。`,
    //     '春节放假通知',
    //     {
    //     confirmButtonText: '确定',
    //     // callback: action => {
    //     //   this.$message({
    //     //     type: 'info',
    //     //     message: `祝您春节愉快...`
    //     //   });
    //     // }
    //   });
    // },

    // 数据处理 截取前9个
    intercept(obj) {
      obj.data = obj.data.slice(0, 9);
      return obj;
    }
  },
  // 组件内路由导航守卫 beforeRouteEnter时候 不能使用this 应为此时实例还未创建  可用回调函数来创建代替this
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     vm.$store.commit('homeShow', false)
  //   })
  // },
  // beforeRouteLeave(to, from, next) {
  //   this.$store.commit('homeShow', true)
  //   next()
  // },

  created() {
  
    console.log("f组件创建");
    this.getInformationCenterData(); // 获取资讯中心的数据
    this.getInfo();
  },
  // mounted() {
  //   this.getInfo()
  //   // this.getdata()  // 上面的实验区域的调用
  // },

  // 返回顶部的
  mounted() {
      try {
      if (window.console && window.console.log) {
        console.log(
          "孚地卖场MRO库存工业品采购平台是一家集机械电气液压电气等国内外行业知名品牌产品+自主品牌运营销售于一体的库存工业品商城 "
        );
        console.log("邮箱：%cmunxmayun@163.com", "color:red");
      }
    } catch (e) {}
    // this.open();
    // document.addEventListener("scroll", this.scrollActive)
  },

  deactivated() {
    // document.removeEventListener("scroll", this.scrollActive)
  }
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  position: relative;
  .RightNav {
    position: fixed;
    top: 70%;
    right: 0px;
    margin-top: -90px;
    font-size: 18px;
  }
  .backTop {
    width: 50px;
    height: 200px;
    background-color: #0a83e7;
    position: fixed;
    right: 0px;
    bottom: 40px;
    z-index: 99;
    li {
      position: relative;
      width: 50px;
      height: 50px;
      font-weight: normal;
      text-align: center;
      line-height: 50px;
      font-size: 30px;
      color: #fff;
      &:hover {
        cursor: pointer;
        div {
          transition: ease-in 0.5s;
          left: -50px;
          // color: rgb(224, 155, 63);
        }
        > i {
          transition: ease-in 0.3s;
          // color: rgb(224, 155, 63);
          transform: scale(1.05, 1.05);
        }
      }
      .showbox {
        position: absolute;
        top: -50px;
        left: -230px;
        width: 230px;
        height: 200px;
        background-color: #409eff;
        border-radius: 20px 0 0 20px;

        li {
          line-height: 16px;
          display: flex;
          flex-direction: row;
          width: 100%;
          height: 40px;
          font-size: 16px;
          padding-top: 12px;
          span {
            display: inline-block;
            padding-left: 10px;
            padding-right: 10px;
            width: 85px;
            font-weight: normal;
            text-align: left;
          }
        }
      }
      div {
        position: absolute;
        top: 0;
        left: 0px;
        width: 100px;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: #409eff;
        i {
          width: 50px;
          height: 50px;
          line-height: 50px;
        }
        span {
          width: 50px;
          height: 50px;
          font-size: 12px;
          line-height: 50px;
        }
      }
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
